<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"
    />
  </head>
  <body>
    <div id="root">
      <router-view></router-view>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
    <script type="module">
      import home from "./home.js";
      import welcome from "./welcome.js";
      import login from "./login.js";

      // VueRouter
      const BASE_PATH = "/前端权限控制/index.html/";
      // 动态路由
      import GoodsCate from "./categories.js";
      import Users from "./users.js";
      const Rule = {
        user: { path: "/users", component: Users },
        categories: { path: "/categories", component: GoodsCate },
      };
      const router = new VueRouter({
        mode: "hash",
        routes: [
          {
            path: "/",
            component: home,
            redirect: "/welcome",
            children: [{ path: "/welcome", component: welcome }],
          },
          {
            path: "/login",
            component: login,
            loading: {
              template: `<h3>加载中...</h3>`,
            },
            error: {
              template: `<h3>加载失败了,请重新加载</h3>`,
            },
            delay: 200,
            timeout: 3000,
          },
          {
            path: "*",
            component: {
              template: "<h3>您访问的地址丢失了哦</h3>",
            },
          },
        ],
      });
      // 这个只解决了用户登录访问的问题,要是用户登录完在地址里输入了这个用户不具权限的地址要动态路由处理了
      router.beforeEach((to, from, next) => {
        // 如果是登录,就让它登录去
        if (to.path === "/login") {
          next();
        } else {
          // 如果其它地址,先看看有没有token
          const token = sessionStorage.getItem("jauthToken");
          // 没有token就让他去登录
          if (!token) {
            next("/login");
            // 有就跳转
          } else {
            next();
          }
        }
      });
      export function initDynamicRoutes() {
        // 根据二级权限,对路由规则进行动态添加, 根据login登录时返回的数据 -> 到login.vue 去导入这个方法
      }
      //  Vuex
      function enduranceToSessionStorage(name, data) {
        typeof data == "object"
          ? sessionStorage.setItem(name, JSON.stringify(data))
          : sessionStorage.setItem(name, data);
      }
      const store = new Vuex.Store({
        state: {
          rightList: JSON.parse(sessionStorage.getItem("rightList")) || [],
          username: sessionStorage.getItem("username"),
        },
        mutations: {
          setRightList(state, payload) {
            state.rightList = payload.data;
            enduranceToSessionStorage("rightList", payload.data);
          },
          setUserNmae(state, payload) {
            state.username = payload.username;
            enduranceToSessionStorage("username", payload.username);
          },
        },
        actions: {},
        getters: {},
      });

      new Vue({
        el: "#root",
        router,
        store,
      });
    </script>
  </body>
</html>
